import React, { useState } from 'react'
import styles from './common.module.scss'
import { Empty, Table, Typography, Tag, Button, Space, Modal, Spin, message } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import ListSearch from '../../components/ListSearch'
import useLoadQuestionListData from '../../hooks/useLoadQuestionListData'
import ListPage from '../../components/ListPage'
import { useRequest } from 'ahooks'
import { deleteQuestionService, updateQuestionService } from '../../services/question'

const { Title } = Typography

const Trash: React.FC = () => {
  // const [questionList, setQuestionList] = useState(rawQuestionList)
  const { data = {}, loading, refresh } = useLoadQuestionListData({ isDeleted: true })
  const { list: questionList = [], total } = data
  const [selectedIds, setSelectedIds] = useState<string[]>([])

  const tableColumns = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '是否发布',
      dataIndex: 'isPublished',
      key: 'isPublished',
      render: (isPublished: boolean) => {
        return isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>
      },
    },
    {
      title: '答卷数量',
      dataIndex: 'answerCount',
      key: 'answerCount',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
  ]

  // 恢复
  const { run: recover } = useRequest(
    async () => {
      for await (const id of selectedIds) {
        await updateQuestionService(id, { isDeleted: false })
      }
    },
    {
      manual: true,
      debounceWait: 500,
      onSuccess() {
        message.success('恢复成功')
        refresh() // [useRequest 的功能]: 手动刷新列表,重新触发 useLoadQuestionListData 钩子中的的请求
        setSelectedIds([])
      },
    }
  )

  function del() {
    Modal.confirm({
      title: '彻底删除该问卷？',
      icon: <ExclamationCircleOutlined />,
      content: '删除以后不可找回',
      onOk: deleteQuestion,
    })
  }
  // 批量删除
  const { run: deleteQuestion } = useRequest(async () => await deleteQuestionService(selectedIds), {
    manual: true,
    onSuccess() {
      message.success('删除成功')
      refresh()
      setSelectedIds([])
    },
  })

  function jsxRender() {
    const TableElem = (
      <>
        <div style={{ marginBottom: '16px' }}>
          <Space>
            <Button type="primary" disabled={!selectedIds.length} onClick={recover}>
              恢复
            </Button>
            <Button danger type="primary" disabled={!selectedIds.length} onClick={del}>
              彻底删除
            </Button>
          </Space>
        </div>
        <Table
          dataSource={questionList}
          columns={tableColumns}
          pagination={false}
          rowKey={q => q._id}
          rowSelection={{
            type: 'checkbox',
            onChange: (selectedRowKeys: React.Key[]) => {
              setSelectedIds(selectedRowKeys as string[])
            },
          }}
        />
      </>
    )

    return (
      <>
        <div className={styles.header}>
          <div className={styles.left}>
            <Title level={3}>我的问卷</Title>
          </div>
          <div className={styles.right}>
            <ListSearch />
          </div>
        </div>
        <div className={styles.content}>
          {loading && (
            <div style={{ textAlign: 'center' }}>
              <Spin />
            </div>
          )}
          {!loading && !questionList.length && <Empty description="暂无数据" />}
          {!loading && questionList.length && TableElem}
        </div>
        <div className={styles.footer}>
          <ListPage total={total} />
        </div>
      </>
    )
  }

  return jsxRender()
}

export default Trash
